<template>
	<!-- 页面容器 -->
	<view class="page">
		<!-- 欢迎文本 -->
		<p style="text-align: left;">欢迎回来~</p>
		<!-- 登录表单 -->
		<view class="form">
			<!-- 手机号输入框 -->
			<view class="form-item">
				<view class="form-title">
						<span class="iconfont icon-a-mti-4Gduijiangmti-eLTE"></span>手机号:
					</view>
				<input type="number" placeholder="请输入手机号" maxlength="11" autofocus v-model="phoneNum"/>
			</view>
			<!-- 密码输入框 -->
			<view class="form-item">
				<view class="form-title">
						<span class="iconfont icon-mti-shoukao"></span>密码:
					</view>
				<input type="password" v-model="password" placeholder="请输入密码" maxlength="11" autofocus/>
			</view>
			<!-- 登录按钮 -->
			<button class="submit-btn" @tap="login">立即登录</button>
			<view class="register-link" style="text-align: center;">
				<text>还没账号？</text><navigator url="/pages/register/register" class="link" style="display: inline;">立即注册</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {login} from "../../api/index.js"
	export default {
		// 组件数据
		data() {
			return {
				phoneNum: '',
				password: ''
			}
		},
		// 组件方法
		methods: {
			login() {
			//组合数据
				let obj = {
					phoneNum: this.phoneNum,
					password: this.password,
				}
				console.log(obj);
				//判断输入是否为空
				if (this.phoneNum.trim() === '' || this.password.trim() === '' ) {
					uni.showToast({
						title: '输入不能为空',
					});
					return
				}
				//提交数据
				login(obj).then(res => {
					if(res.data.status === 0){
							console.log(res, '登录成功');
							uni.showToast({
								title: '登录成功',
						});
						
						// 把返回的token和userInfo存入本地
						console.log('token:', res.data.token);
						console.log('userInfo:', res.data.userInfo);
						uni.setStorageSync('name',"何笑")
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('userInfo', res.data.userInfo);
						
						// 延迟跳转到主页
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 800);
						}else{
							uni.showToast({
								title: '登录失败',
							});
						}
				})
				//uni显示消息
				// uni.request({
				// 	url: 'http://8.140.198.52:8001/api/webapi/login',
				// 	method: 'POST',
				// 	data: obj,
				// 	success: (res) => {
				// 		if(res.data.status === 0){
				// 			console.log(res, '登录成功');
				// 			uni.showToast({
				// 				title: '登录成功',
				// 		});
						
				// 		// 把返回的token和userInfo存入本地
				// 		console.log('token:', res.data.token);
				// 		console.log('userInfo:', res.data.userInfo);
				// 		uni.setStorageSync('name',"何笑")
				// 		uni.setStorageSync('token', res.data.token);
				// 		uni.setStorageSync('userInfo', res.data.userInfo);
						
				// 		// 延迟跳转到主页
				// 		setTimeout(() => {
				// 			uni.switchTab({
				// 				url: '/pages/index/index'
				// 			})
				// 		}, 800);
				// 		}else{
				// 			uni.showToast({
				// 				title: '登录失败',
				// 			});
				// 		}
			
				// 	}
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
// 页面容器样式
.page {
	background: linear-gradient(#b2cfed, #ffff);
	width: 100%;
	height: 100vh;
}
// 表单容器样式
.form {
	padding: 50rpx;
}
// 段落文本样式
p {
	text-align: center;
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
	padding: 40rpx 0;
}
// 表单项样式
.form-item {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

// 表单项文本样式
.form-item text {
	width: 120rpx;
	font-size: 28rpx;
	color: #333;
}

// 表单项输入框样式
.form-item input {
	flex: 1;
	height: 80rpx;
	padding: 0 20rpx;
	border: 1px solid #ddd;
	border-radius: 8rpx;
	font-size: 28rpx;
}

// 提交按钮样式
.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background: #007AFF;
	color: #fff;
	font-size: 32rpx;
	border-radius: 44rpx;
	margin-top: 50rpx;
}

// 提交按钮点击效果
.submit-btn:active {
	opacity: 0.8;
}

</style>
